/**
 * Created by Administrator on 2018/1/13.
 */
/**
 * Created by Administrator on 2017/12/2.
 */
define(function(require, exports, module) {
    var $=require('zepto');
        swiper=require('swiper'),
        cn=require('./conment');
        cook=require('cookie');
        var tel=/^1[3|4|5|7|8]\d{9}$/;
        var pswd=/^[0-9A-Za-z]+$/;
    module.exports = {
        p:{
            timeTxt:'发送验证码',
            time:60,
            istime:false,
        },
        dialogin:function(option){
            var _this=this;
            var $loginModel=$('<div id="page-login" class="animateUp" style="height: 100%"></div>');
            var  $loginHead=$('<div class="login-head"> <h3 class="login-img-c"><span id="removeHtml"></span></h3> <div class="login-tab" id="dynamic"> <div class="active"><span>登录</span></div> ' +
                    '<div><span>注册</span></div> <i id="r-bd"></i> </div></div>');
            var $loginFrom=$('<div class="page-content page-top-border" style="height: 100%"></div>');
            var $container=$('<div class="swiper-container" style="height: 100%"></div>');
            var  $container2=$('<div class="swiper-container2"></div>');
            var $swiper=$('<div class="swiper-wrapper"></div>');

            var $loginHtml=$(' <ul class="swiper-slide newest" style="height:auto"> <div class="login">' +
                ' <ul class="bind-bank"  style="padding-top: 0.15rem;"> ' +
                '<li> <span class="bank-txt">手机号</span> <input type="text" id="login-tel" maxlength="11" placeholder="请输入手机号"/> </li> ' +
                '<li> <span class="bank-txt">密码</span> <input type="password" id="login-pswd" maxlength="18" placeholder="请输入密码"/> </li> ' +
                '</ul><div class="login-btn"> <button type="button" id="login-go">登录</button> </div> </div></ul>');

            var $registerHtml=$('<ul class="swiper-slide hotsm"> <div class="login"> <ul class="bind-bank"  style="padding-top: 0.15rem;"> ' +
                '<li><span class="bank-txt">手机号</span> <input type="text" maxlength="11" id="register-tel" placeholder="请输入手机号"/> </li> ' +
                '<li> <span class="bank-txt">验证码</span> <input type="tel" maxlength="6" id="register-code"  class="input-code" placeholder="请输入验证码"/> <span class="getCode" id="codeTxt">'+_this.p.timeTxt+'</span> </li> ' +
                '<li> <span class="bank-txt">新密码</span> <input type="password" maxlength="18" id="register-pswd" placeholder="请输入新密码"/> </li> ' +
                '<li> <span class="bank-txt">确认密码</span> <input type="password" maxlength="18" id="register-pswd2" placeholder="请再输入新密码"/> </li> ' +
                '</ul> ' +
                '<div class="login-btn"> <button type="button" id="register-btn">注册</button> </div> </div> ' +
                '</ul>')

            $loginModel.append($loginHead);
            $loginModel.append($loginFrom);
            $loginFrom.append($container);
            $container.append($container2);
            $container2.append($swiper);
            $swiper.append($loginHtml);
            $swiper.append($registerHtml);
            $('body').append($loginModel);
            $('#removeHtml').on('click',function () {
                $('#page-login').removeClass('animateUp').addClass('animateDown')
                setTimeout(function () {
                    $loginModel.remove()
                },1000*0.3)

            });
            //滑动
            _this.touchModelLogin();
            $('#login-go').on('click',function () {
                var t=$.trim($("#login-tel").val()),p=$.trim($("#login-pswd").val());
                var next=_this.loginRex(t,p);
                if(next!='true'){
                    _this.setTimeMode(next)
                }else{
                    console.log('成功')
                }

            });
            $('#register-btn').on('click',function () {
                var t=$.trim($("#register-tel").val()),p=$.trim($("#register-pswd").val()),p2=$.trim($("#register-pswd2").val()),code=$.trim($("#register-code").val());
                var next=_this.registerRex(t,p,p2,code);
                if(next!='true'){
                    _this.setTimeMode(next)
                }else{
                    console.log('成功')
                }
            });
            $('#codeTxt').on('click',function () {
                var t=$.trim($("#register-tel").val());
                var txt=$('#codeTxt').text();
                var next=_this.isTel(t);
                if(next!='true'){
                    _this.setTimeMode(next)
                }else{
                    if(_this.p.istime)return
                    _this.p.istime=true
                    _this.p.time=60;
                    _this.getcodeTime(txt)
                }
            })

        },
        getcodeTime:function (txt) {
            var _this=this
            if(!_this.p.istime) return;
            _this.p.time>0?$('#codeTxt').text(_this.p.time+'s后重新获取'):$('#codeTxt').text('重新获取');
            --_this.p.time;
            _this.p.time<0?_this.p.istime=false:_this.p.istime=true
            setTimeout(function () {
                _this.getcodeTime()
            },1000);
        },
        touchModelLogin:function () {
            var width=$(window).width();
            var mySwiper2 = new Swiper('.swiper-container2',{
                onTransitionEnd: function(swiper){
                    $('.w').css('transform', 'translate3d(0px, 0px, 0px)')
                    $('.swiper-container2 .swiper-slide-active').css('height','auto').siblings('.swiper-slide').css('height','0px');
                    $('#dynamic div').eq(mySwiper2.activeIndex).addClass('active').siblings().removeClass('active');
                    var Y = $('div.active span').offset().left;
                    $("#r-bd").animate({'margin-left':parseFloat(Y/width)*100+'%'})

                }
            });
            $('#dynamic div').click(function(){
                $(this).addClass('active').siblings().removeClass('active');
                mySwiper2.slideTo($(this).index(), 500, false)
                $('.w').css('transform', 'translate3d(0px, 0px, 0px)')
                $('.swiper-container2 .swiper-slide-active').css('height','auto').siblings('.swiper-slide').css('height','0px');
                var Y = $('div.active span').offset().left;
                $("#r-bd").animate({'margin-left':parseFloat(Y/width)*100+'%'})
            });
        },
        loginRex:function (t,p) {
            return t==""?'请输入手机号码'
                :!tel.test(t)?'手机号码格式错误'
                    :(p==''||p.length<6)?'请输入6-18位数字，英文字母'
                        :!pswd.test(p)?'密码格式错误':'true'
        },
        registerRex:function (t,p,p2,c) {
            return t==""?'请输入手机号码'
                :!tel.test(t)?'手机号码格式错误'
                    :c==''?'请输入验证码'
                        :(p==''||p.length<6)?'请输入6-18位数字，英文字母'
                            :!pswd.test(p)?'密码格式错误'
                                :p!=p2?'密码输入不一致':'true'
        },
        isTel:function (t) {
            return t==""?'请输入手机号码'
                :!tel.test(t)?'手机号码格式错误':'true'
        },

        setTimeMode:function (msg) {
            var $msgModel=$('<div class="msgTxt">'+msg+'</div>');
            $('body').append($msgModel)
            setTimeout(function () {
                $msgModel.remove()
            },1000)
        },
        init:function () {
        //tab 切换
            var _this=this;
            $('#showMode').on('click',function () {
                _this.dialogin()
            })
        },
    }

});